<template>
  <div>
    <div class="payway-content">
      <el-form ref="pictureDesList" :model="payWayList" label-width="98px">
        <el-form-item label="付款方式：">
          <div>
            <el-radio
              v-model="payWayList.TransactionMode"
              :label="0"
              :disabled="showFlag"
              @change="senddataContent('全额付款')"
            >全额付款（普通交易模式）</el-radio>
            <el-radio
              v-model="payWayList.TransactionMode"
              :label="1"
              :disabled="showFlag"
              @change="addValue()"
            >定金付款</el-radio>
          </div>
        </el-form-item>
        <div v-show="payWayList.TransactionMode===1?true:false" class="payway-step">
          <el-steps :active="3" align-center>
            <el-step title="定金付款" />
            <el-step title="设定交付尾款截止时间" />
            <el-step title="发货" />
          </el-steps>
          <div class="step-checkedway">
            <div class="before-pay">
              预付款：
              <el-select
                v-model="payWayList.beforePayValue"
                placeholder="请选择"
                :disabled="showFlag"
                @change="senddataContent('预付款')"
              >
                <el-option
                  v-for="item in beforePay"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div class="end-money">
              尾款：
              <el-select
                v-model="payWayList.endMoneyValue"
                placeholder="请选择"
                :disabled="showFlag"
                @change="senddataContent('尾款')"
              >
                <el-option
                  v-for="item in endMoney"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              &ensp;后付{{ (1 - payWayList.beforePayValue) * 100 }}%
            </div>
            <div class="pay-end">尾款支付后发货</div>
          </div>
        </div>
        <el-form-item label="设置运费：" class="payway-fare">
          <el-input
            v-model="payWayList.paywayFare"
            placeholder="请输入运费金额"
            @change="validatNumb(payWayList.paywayFare)"
            @blur="sendData()"
          />&emsp;元
        </el-form-item>
        <el-form-item label="设为主打产品：" class="payway-fare">
          <el-switch v-model="payWayList.mainProduct" @change="senddataContent('设为主打产')" />
        </el-form-item>
        <!-- <el-form-item label="是否提供发票：">
          <el-radio v-model="payWayList.receiptTF" :label="1" style="margin-right:72px;" @change="senddataContent('立即上架')">是</el-radio>
          <el-radio v-model="payWayList.receiptTF" :label="2" style="margin-right:72px;" @change="senddataContent('放入仓库')">否</el-radio>
          <div>
            <el-checkbox-group v-show="payWayList.receiptTF === 1" v-model="checkList" @change="checkListChange()">
              <el-checkbox label="增值税发票" />
              <el-checkbox label="企业普通发票" />
              <el-checkbox label="个人普通发票" />
            </el-checkbox-group>
          </div>
        </el-form-item> -->
        <el-form-item label="上架设置：">
          <el-radio v-model="payWayList.type" :disabled="payWayList.upWay === 3" :label="1" @change="senddataContent('立即上架')">立即上架</el-radio>
          <el-radio v-if="payWayList.upWay === 2" v-model="payWayList.type" :label="2" @change="senddataContent('放入仓库')">放入仓库</el-radio>
          <el-radio v-else v-model="payWayList.type" :disabled="payWayList.upWay === 3" :label="3" @change="senddataContent('放入仓库')">放入仓库</el-radio>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    getdata: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      payWayList: {
        // 0:全额，1：定金
        TransactionMode: 0,
        type: 1, // 1:立即上架，2：放入仓库
        beforePayValue: 0.1,
        endMoneyValue: 15,
        paywayFare: '', // 运费
        mainProduct: false, // 是否设为主打产品，
        flag: -1,
        receiptTF: 1, // 1：开发票 2 不开发票
        receipt: 1,
        upWay: 1 // 1:返回来的 立即上架，2 放入仓库 3 不可修改
      },
      checkList: [],
      // 预付款
      beforePay: [
        {
          value: 0.1,
          label: '10%'
        },
        {
          value: 0.2,
          label: '20%'
        },
        {
          value: 0.3,
          label: '30%'
        },
        {
          value: 0.4,
          label: '40%'
        },
        {
          value: 0.5,
          label: '50%'
        },
        {
          value: 0.6,
          label: '60%'
        },
        {
          value: 0.7,
          label: '70%'
        },
        {
          value: 0.8,
          label: '80%'
        },
        {
          value: 0.9,
          label: '90%'
        }
      ],
      // 尾款
      endMoney: [
        {
          value: 15,
          label: '15天'
        },
        {
          value: 30,
          label: '30天'
        },
        {
          value: 60,
          label: '60天'
        },
        {
          value: 120,
          label: '120天'
        }
      ],
      showFlag: false
    };
  },
  watch: {
    getdata() {
      this.payWayList = this.getdata.payWay;
      this.payWayList.flag = 0;
      this.upWay = this.getdata.payWay.type;
      this.payWayList.TransactionMode = parseInt(
        this.payWayList.TransactionMode
      );
      this.payWayList.beforePayValue = parseFloat(
        this.payWayList.beforePayValue
      );
    }
  },
  created() {
    const id = sessionStorage.getItem('handleEdit');
    if (id && id.length > 1) {
      this.showFlag = true;
    }
  },
  methods: {
    validatNumb(value) {
      const reg = /^\d+(\.\d+)?$/;
      if (!reg.test(value)) {
        this.$message({
          message: `${name}只能为数字型且为正数！`,
          type: 'error',
          showClose: true,
          duration: 4000
        });
        this.payWayList.paywayFare = '';
        this.payWayList.flag = -1;
        return false;
      }
    },
    sendData() {
      if (this.payWayList.paywayFare === '') {
        this.payWayList.flag = -1;
        this.$message.error('请输入运费');
        return;
      }
      this.payWayList.flag = 0;
      this.senddataContent('运费');
    },
    addValue() {
      this.senddataContent('定金付款');
    },
    senddataContent(value) {
      if (this.payWayList.flag === 0) {
        if (this.payWayList.TransactionMode === 0) {
          this.payWayList.beforePayValue = 0.1;
          this.payWayList.endMoneyValue = 15;
          this.payWayList.paywayFare = parseFloat(this.payWayList.paywayFare);
          this.$emit('getPayWayInfo', this.payWayList);
        } else if (this.payWayList.TransactionMode === 1) {
          this.$emit('getPayWayInfo', this.payWayList);
        } else {
          this.$emit('getPayWayInfo', -1);
        }
      } else {
        this.$emit('getPayWayInfo', -1);
        return;
      }
    },
    checkListChange() {
    }
  }
};
</script>

<style lang="scss" scoped>
.payway-content {
  width: 100%;
  padding-bottom: 30px;
  .el-form {
    padding: 10px 0 15px 18%;
    width: 100%;
    .el-form-item {
      width: 100%;
      margin: 30px 0 0 0;
      .el-input {
        width: 200px;
        height: 36px;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
      }
    }
    .payway-step {
      margin-left: 98px;
      padding: 19px 0 17px 0;
      width: 100%;
      max-width: 862px;
      height: 120px;
      background: rgba(249, 251, 252, 1);
      border: 1px solid rgba(228, 233, 239, 1);
      .step-checkedway {
        display: flex;
        padding: 15px 0 0 10%;
        .before-pay,
        .end-money,
        .pay-end {
          color: #838a9d;
          font-size: 14px;
        }
        .end-money {
          padding-left: 14%;
        }
        .pay-end {
          line-height: 30px;
          padding-left: 13%;
        }
        .el-select {
          width: 96px;
          background: rgba(255, 255, 255, 1);
          border-radius: 4px;

          /deep/.el-input__inner {
            height: 30px;
            padding: 10%;
          }
          /deep/.el-input__icon {
            line-height: 30px;
          }
        }
      }
    }
  }
}
/deep/.el-checkbox-group {
  border:1px solid #E4E9EF;
  background:rgba(249,251,252,1);
  width: 860px;
  padding-top: 5px;
  padding-left: 22px;
}
/deep/.el-form-item__label {
  padding: 0;
}
/deep/.el-step__title {
  font-size: 16px;
  font-weight: 500;
  color: rgba(60, 67, 83, 1);
  line-height: 24px;
}
</style>
